<!-- 进度 -->
<template>
    <div class="progress">
        <van-steps direction="vertical" 
        :active="active"
        active-color="#ff8501" v-if="stepsData">
            <van-step>
                <div class="stepBox" :class="active==0 ? 'active':''" @click="addClass($event)">
                  <h3>信息确认</h3>
                  <p v-if="stepsData.opinfo[0]">{{stepsData.opinfo[0].create_time}}</p>
                  <van-icon name="arrow" class="arrow" />
                  <div class="info">
                    投保人：<span v-for="(item,index) in stepsData.guanxi" :key="index">{{item}}</span>
                  </div>
                </div>
            </van-step>
            <van-step>
                <div class="stepBox" :class="active==1 ? 'active':''" @click="addClass($event)">
                  <h3>初步沟通</h3>
                  <p v-if="stepsData.opinfo[1]">{{stepsData.opinfo[1].create_time}}</p>
                  <van-icon name="arrow" class="arrow" />
                  <div class="info">
                    <span v-if="stepsData.yuyue_time">电话沟通时间:{{stepsData.yuyue_time}}</span>
                    <router-link v-else class="makeTime" to='makeTime'>预约沟通时间>></router-link>
                  </div>
                </div>
            </van-step>
            <van-step>
                <div class="stepBox" :class="active==2 ? 'active':''" @click="addClass($event)">
                  <h3>保障方案制作中</h3>
                  <p v-if="stepsData.opinfo[2]">{{stepsData.opinfo[2].create_time}}</p>
                  <van-icon name="arrow" class="arrow" />
                  <div class="info" v-if="stepsData.chanpin">
                    <p>{{stepsData.chanpin.mingcheng}}</p>
                    <p>{{stepsData.chanpin.tedian}}</p>
                  </div>
                </div>
            </van-step>
            <van-step>
                <div class="stepBox" :class="active==3 ? 'active':''" @click="addClass($event)">
                  <h3>保障方案已发布</h3>
                  <p v-if="stepsData.opinfo[3]">{{stepsData.opinfo[3].create_time}}</p>
                  <van-icon name="arrow" class="arrow" />
                  <div class="info">
                    <router-link class="makeTime" to='plan'>保障方案>></router-link>
                  </div>
                </div>
            </van-step>
        </van-steps>

        <div class="btnBox" v-if="stepsData">
          <zixun/>
        </div>

        <div class="wu" v-else>
            <div>
              <img :src="img">
              <p>目前还没有方案，赶快去定制吧</p>
            </div>
            <div class="btnBox">
              <router-link class="btn" to='/'>立即定制</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import zixun from '@/components/zixun.vue'
export default {
    data() {
        return {
          active:0,
          stepsData:'',
          img:require("@/assets/wu.png"),
        };
    },
    components: {zixun},
    computed: {},
    mounted() {
        this.$api.getmyorderprogress().then((res)=>{
        this.stepsData = res.data
        if(res.data){
          if(res.data.order_status == '0'){
            this.active = 0
          }else if(res.data.order_status == '3'){
            this.active = 1
          }else if(res.data.order_status == '6'){
            this.active = 2
          }else if(res.data.order_status == '9'){
            this.active = 3
          }
          
          
          sessionStorage.setItem("orderid",res.data.orderid)
        }
      })
    },
    methods: {
      addClass(e) {
            if(e.target.className!=='info'){
              if (e.target.parentNode.className.indexOf("stepBox")>-1) {
                  e.target.parentNode.classList.toggle("active");
              }
            }
        }
    }
};
</script>
<style lang='less'>
.progress{
  width: 100%;
  min-height: 100vh;
  background: #f2eff2;
  padding: 35px 15px 80px;

  .van-steps{
    background: no-repeat;
    .van-steps__items{
      .van-step--vertical{padding: 0;padding-bottom: 10px;
      }
      .van-step--vertical:last-of-type{padding-bottom: 0;}
    }
    
    .van-step__title{background: #fff !important;padding: 15px;}
    .van-step--vertical:first-child::before{width: 2px;background: #DADADA}
    
    .van-step--vertical .van-step__line{width: 2px;background: #DADADA}
    .van-step__circle{background: url('~@/assets/jd1.png');background-size: 14px 14px;width: 14px;height: 14px;}
    .van-icon-checked{background: url('~@/assets/jd2.png');background-size: 14px 14px;width: 14px;height: 14px;
      &:before{display: none}
    }
  }

  .van-step--process{
     .stepBox{
        h3{color: #ff8501}
     }
  }

  .stepBox{
    width: 100%;
    position: relative;
    h3{color: #373636;font-size: 16px;font-weight: 500}
    p{color: #9F9A98;font-size: 13px;margin-top: 5px;}
    .arrow{position: absolute;right: 0;top:0px;font-size: 26px}
    .info{display: none;}

    &.active{
      
      .arrow{transform:rotate(90deg);}
      .info{
        width: 100%;
        display: inline-block;
        border-top: 1px solid #ECE7E5;
        margin-top: 15px;
        padding-top: 15px;
        color: #9F9A98;
        
        .makeTime{
          color: #FF8703
        }
      }
    }
  }

  
  .btnBox {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 15px;
    width: 100%;
    border-radius: 17px 17px 0 0;
  }
}

.wu{
  text-align: center;
  padding-top: 180px;
  img{width: 99px;height: 88px;}
  p{color: #9F9A98; font-size: 13px;margin-top: 30px;}
}
</style>